<template>
  <div class="createPost-container">
    <!--    专题产品-->
    <!--    <el-select v-model="templateId" placeholder="模板选择" clearable style="width: 150px" class="filter-item">-->
    <!--      <el-option label="模板1" value="1"/>-->
    <!--      <el-option label="模板2" value="2"/>-->
    <!--    </el-select>-->

    <div class="main">
      <div class="left">
        <div style="position:relative;height:1100px">
          <img style="position:absolute;left:30px;top:50px;width:482px;"
               src="https://s1.ax1x.com/2020/03/17/8tqhP1.png"/>

          <div class="template1" v-if="theme.template==1">

            <div class="theme-title">{{theme.title}}</div>
            <div class="dividing-line"></div>

            <div class="part1">
              <div v-for="(product,index) in part1" style="position: relative" @mouseenter="mouseEnter(1,index)"
                   @mouseleave="mouseLeave(1,index)">
                <div>
                  <img :src="product.coverPic" class="product-img"/>
                  <div style="margin-left: 15px">
                    <div class="product-title">
                      {{product.title}}
                    </div>
                    <div class="product-desc">
                      {{product.description}}
                    </div>
                    <div class="product-price">￥{{product.price}}</div>
                  </div>
                </div>


                <!-- 遮罩层-->
                <div v-if="product.showBtn"
                     style="position: absolute;top:0;left:0;width:100px;height:100px;border:1px blue solid;background:rgba(39,60,125,0.5);">
                  <el-button @click="handleDelete(1,index,product)">
                    移除
                  </el-button>
                  <el-upload
                    action="http://localhost:8280/file"
                    :show-file-list="false"
                    :on-success="(response) => uploadImgSuccess(response,1,index,product.id)">
                    <el-button size="small">换图</el-button>
                  </el-upload>
                </div>

              </div>

              <div>
                <div class="product-img"
                     style="cursor:pointer;display: flex;justify-content: center;align-items: center;"
                     @click="showDialog(1,1)">
                  <img style="width:60px;height:60px" src="@/assets/images/add.png"/>
                </div>
              </div>
            </div>

            <!--中间的间隔-->
            <div class="dividing-zone"></div>

            <div class="part2">
              <div v-for="(product,index) in part2" style="position: relative" @mouseenter="mouseEnter(2,index)"
                   @mouseleave="mouseLeave(2,index)">

                <img :src="product.coverPic" class="long-item"/>
                <!-- 遮罩层-->
                <div v-if="product.showBtn"
                     style="position: absolute;top:0;left:0;width:100px;height:100px;border:1px blue solid;background:rgba(39,60,125,0.5);">
                  <el-button @click="handleDelete(2,index,product)">
                    移除
                  </el-button>
                  <el-upload
                    action="http://localhost:8280/file"
                    :show-file-list="false"
                    :on-success="(response) => uploadImgSuccess(response,2,index,product.id)">
                    <el-button size="small">换图</el-button>
                  </el-upload>
                </div>
              </div>
              <div class="long-item" style="cursor:pointer; display: flex;justify-content: center;align-items: center;"
                   @click="showDialog(2,1)">
                <img style="width:60px;height:60px" src="@/assets/images/add.png"/>
              </div>
            </div>
          </div>
        </div>


        <div v-if="theme.template==2" class="template2" style="position:absolute;left:62px;top:192px;width: 414px;">
          <div style="font-weight: 600;font-size: 15px;color: #666;margin-top: 10px;margin-left: 20px">{{theme.title}}
          </div>
          <div style="width:100%;height:1px;border-bottom:solid 1px #d9d9d9;margin-bottom: 15px;margin-top: 10px"></div>

          <!--横向滚动-->
          <div style="height: 210px;width: 414px; overflow-x:auto;white-space:nowrap;padding-right: 15px;">
            <div :style="'width:' + (this.part1.length + 1) * 148 + 'px;display: flex;justify-content: flex-start'">

              <div v-for="(product,index) in part1" style="margin-left: 15px;position: relative"
                   @mouseenter="mouseEnter(1,index)" @mouseleave="mouseLeave(1,index)">
                <img :src="product.coverPic"
                     style="border: 1px solid #d9d9d9;width: 130px;height: 130px; border-radius: 5px"/>
                <div style="margin-left: 10px">
                  <div
                    style="text-overflow: ellipsis;width:110px;overflow: hidden;white-space: nowrap;font-weight: 600;font-size: 13px;line-height:20px;margin-top: 10px">
                    {{product.title}}
                  </div>
                  <div
                    style="text-overflow: ellipsis;width:110px;overflow: hidden;white-space: nowrap;font-weight: 500;font-size: 11px; color:gray">
                    {{product.description}}
                  </div>
                  <div style="font-weight: 600;font-size: 13px; color:red;line-height: 20px;">￥{{product.price}}</div>
                </div>

                <!-- 遮罩层-->
                <div v-if="product.showBtn"
                     style="position: absolute;top:0;left:0;width:100px;height:100px;border:1px blue solid;background:rgba(39,60,125,0.5);">
                  <el-button @click="handleDelete(1,index,product)">
                    移除
                  </el-button>
                  <el-upload
                    action="http://localhost:8280/file"
                    :show-file-list="false"
                    :on-success="(response) => uploadImgSuccess(response,1,index,product.id)">
                    <el-button size="small">换图</el-button>
                  </el-upload>
                </div>
              </div>


              <div
                style="cursor:pointer;margin-left: 15px;border: 1px solid #d9d9d9;width: 130px;height: 130px; border-radius: 5px;display: flex;justify-content: center;align-items: center"
                @click="showDialog(1,1)">
                <img style="width: 60px;height:60px" src="@/assets/images/add.png"/>
              </div>

            </div>

          </div>
          <!--中间的间隔-->
          <!--      <div style="background-color: #e6e6e6;height:10px;margin-top: 20px"></div>-->

          <div class="part2">
            <div v-for="(product,index) in part2" style="position: relative" @mouseenter="mouseEnter(2,index)"
                 @mouseleave="mouseLeave(2,index)">

              <img :src="product.coverPic" class="long-item"/>
              <!-- 遮罩层-->
              <div v-if="product.showBtn"
                   style="position: absolute;top:0;left:0;width:100px;height:100px;border:1px blue solid;background:rgba(39,60,125,0.5);">
                <el-button @click="handleDelete(2,index,product)">
                  移除
                </el-button>
                <el-upload
                  action="http://localhost:8280/file"
                  :show-file-list="false"
                  :on-success="(response) => uploadImgSuccess(response,2,index,product.id)">
                  <el-button size="small">换图</el-button>
                </el-upload>
              </div>
            </div>
            <div class="long-item" style="cursor:pointer; display: flex;justify-content: center;align-items: center;"
                 @click="showDialog(2,1)">
              <img style="width:60px;height:60px" src="@/assets/images/add.png"/>
            </div>
          </div>
        </div>
      </div>

      <div class="right">
        <el-tabs type="card">
          <el-tab-pane label="更多商品">
            <el-button @click="showDialog(0,0)">
              添加商品
            </el-button>
            <el-table
              :key="tableKey2"
              v-loading="listLoading2"
              :data="list2"
              border
              fit
              highlight-current-row
              style="width: 100%;"
            >
              <el-table-column label="ID" prop="id" align="center" width="80">
                <template slot-scope="{row}">
                  <span>{{ row.id }}</span>
                </template>
              </el-table-column>

              <el-table-column label="标题" width="200px" align="center">
                <template slot-scope="{row}">
                  <span>{{ row.title }}</span>
                </template>
              </el-table-column>
              <el-table-column label="图片" width="130px" align="center">
                <template slot-scope="{row}">
                  <img :src="row.imgUrl" width="100px" height="100px">
                </template>
              </el-table-column>
              <el-table-column label="现价" width="110px" align="center">
                <template slot-scope="{row}">
                  <span>{{ row.price }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button @click="handleDelete(0,scope.$index,scope.row)" size="small" type="danger" icon="el-icon-delete" circle>

                  </el-button>
                </template>

              </el-table-column>
            </el-table>

            <pagination v-show="total2>0" :total="total2" :page.sync="listQuery2.curPageNum"
                        :limit.sync="listQuery2.pageSize"
                        @pagination="getMoreProduct"/>

          </el-tab-pane>
        </el-tabs>
      </div>
    </div>


    <!--    添加商品-->
    <el-dialog title="添加商品" :visible.sync="dialogFormVisible" @close="getProducts">
      <div>添加商品吧</div>
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="ID" prop="id" align="center" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>

        <el-table-column label="标题">
          <template slot-scope="{row}">
            <span>{{ row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="图片" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.imgUrl" width="100px" height="100px">
          </template>
        </el-table-column>
        <el-table-column label="现价" width="110px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
          <template slot-scope="scope">

            <el-button size="small" @click="handleAdd(scope.row, scope.row.id)">
              添加
            </el-button>
          </template>

        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="listQuery.curPageNum" :limit.sync="listQuery.pageSize"
                  @pagination="loadCandidateProducts"/>

    </el-dialog>
  </div>
</template>

<script>
  import {getCoverProduct, getCandidateProduct, addProduct, deleteThemeProduct, getMoreProduct} from '@/api/theme'
  import Pagination from '@/components/Pagination'
  import {updateThemeProduct, getTheme} from "../../api/theme"; // secondary package based on el-pagination

  export default {
    name: 'ThemeDetail',
    components: {Pagination},
    props: {
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        theme: {
          id: null,
          themeId: null,
          title: '',
          template: null,
          picUrl: '',
          description: ''
        },
        templateId: "1",
        part1: [],
        part2: [],
        dialogFormVisible: false,
        listQuery: {
          curPageNum: 1,
          pageSize: 5,
          themeId: null,
        },
        listQuery2: {
          curPageNum: 1,
          pageSize: 5,
          themeId: null,
        },
        list: null,
        list2: null,
        listLoading: false,
        listLoading2: false,
        tableKey: 0,
        tableKey2: 2,
        total: 0,
        total2: 0,
        currentModule: 1,
        coverShow: null
      }
    },

    created() {
      const themeId = this.$route.params && this.$route.params.id
      this.getTheme(themeId)


      // Why need to make a copy of this.$route here?
      // Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
      // https://github.com/PanJiaChen/vue-element-admin/issues/1221
      this.tempRoute = Object.assign({}, this.$route)
    },
    methods: {
      getTheme(themeId) {
        getTheme(themeId).then(r1 => {
          this.theme = r1.data
          this.getProducts()
        })
      },

      getProducts(){
        this.getCoverProduct()
        this.getMoreProduct()
      },

      getCoverProduct(themeId) {
        if (themeId === undefined) {
          themeId = this.theme.id
        }
        getCoverProduct(themeId).then(r1 => {
          this.part1 = r1.data.part1
          this.part2 = r1.data.part2
        })
      },

      getMoreProduct() {
        this.listLoading2 = true
        this.listQuery2.themeId = this.theme.id
        getMoreProduct(this.listQuery2).then(r1 => {
          this.list2 = r1.data.list
          this.total2 = r1.data.total
          this.listLoading2 = false
        })
      },

      showDialog(currentModule,coverShow) {
        this.currentModule = currentModule
        this.coverShow = coverShow
        this.dialogFormVisible = true
        this.loadCandidateProducts()
      },

      loadCandidateProducts() {
        this.listLoading = true
        this.listQuery.themeId = this.theme.id
        getCandidateProduct(this.listQuery).then(r1 => {
          this.list = r1.data.list
          this.total = r1.data.total
          this.listLoading = false
        })
      },

      handleAdd(row, id) {
        let data = {
          themeId: this.theme.id,
          productId: id,
          coverShow: this.coverShow,
          module: this.currentModule

        }
        addProduct(data).then(r1 => {
          this.loadCandidateProducts()
          this.$message({
            type: 'success',
            message: '添加成功'
          })
        })
      },

      handleDelete(module, index, product) {
        let data = {
          themeId: product.themeId,
          productId: product.productId
        }
        deleteThemeProduct(data).then(r1 => {
          if (module === 1) {
            this.part1.splice(index, 1)
          } else if(module == 2){
            this.part2.splice(index, 1)
          }else{
            this.list2.splice(index,1)
          }
          this.$message({
            type: 'success',
            message: '删除专题商品成功'
          })
        })
      },

      uploadImgSuccess(response, module, index, id) {
        //保存图片地址
        let data = {
          id: id,
          coverPic: response.data.url
        }
        updateThemeProduct(data).then(r1 => {
          if (module === 1) {
            this.part1[index].coverPic = response.data.url
          } else {
            this.part2[index].coverPic = response.data.url
          }
        })
      },
      mouseEnter(module, index) {
        if (module === 1) {
          this.$set(this.part1[index], 'showBtn', true)
        } else {
          this.$set(this.part2[index], 'showBtn', true)
        }
      },
      mouseLeave(module, index) {
        if (module === 1) {
          this.$set(this.part1[index], 'showBtn', false)
        } else {
          this.$set(this.part2[index], 'showBtn', false)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "~@/styles/mixin.scss";

  .main {
    display: flex;

  }

  .left {
    width: 600px;
  }

  .right {
    margin-top: 100px;
  }

  .template1, .template2 {
    height: 712px;
    overflow: scroll;
    overflow-x: hidden;
    position: absolute;
    left: 62px;
    top: 192px;
    width: 414px;
    padding-bottom: 20px;
  }


  //自动移滚动条样式
  ::-webkit-scrollbar {
    overflow-x: hidden;
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 1em;
    background-color: rgba(50, 50, 50, .3);
  }

  ::-webkit-scrollbar-track {
    border-radius: 1em;
    background-color: rgba(50, 50, 50, .1);
  }

  .theme-title {
    font-weight: 600;
    font-size: 15px;
    color: #666;
    margin-top: 10px;
    margin-left: 20px
  }

  .dividing-line {
    width: 100%;
    height: 1px;
    border-bottom: solid 1px #d9d9d9;
    margin-bottom: 15px;
    margin-top: 10px
  }

  .template1 .part1 {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-left: 15px
  }

  .template1 .product-img {
    width: 180px;
    height: 180px;
    border: 1px solid #d9d9d9;
    margin: 5px;
  }

  .template1 .product-title {
    text-overflow: ellipsis;
    width: 165px;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 600;
    font-size: 13px;
    line-height: 20px;
  }

  .template1 .product-desc {
    text-overflow: ellipsis;
    width: 165px;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 500;
    font-size: 11px;
    color: gray
  }

  .template1 .product-price {
    font-weight: 600;
    font-size: 13px;
    color: red
  }

  .template1 .dividing-zone {
    background-color: #e6e6e6;
    height: 10px;
    margin-top: 20px
  }

  .long-item {
    width: 380px;
    height: 150px;
    border: 1px solid #d9d9d9;
    margin: 5px;
    border-radius: 10px
  }

  .part2 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px
  }


  .createPost-container {
    position: relative;

    .createPost-main-container {
      padding: 40px 45px 20px 50px;

      .postInfo-container {
        position: relative;
        @include clearfix;
        margin-bottom: 10px;

        .postInfo-container-item {
          float: left;
        }
      }
    }

    .word-counter {
      width: 40px;
      position: absolute;
      right: 10px;
      top: 0px;
    }
  }

  .news-textarea /deep/ {
    textarea {
      padding-right: 40px;
      resize: none;
      border: none;
      border-radius: 0px;
      border-bottom: 1px solid #bfcbd9;
    }
  }
</style>
